<template>
  <div class="home">
    <!-- 轮播 -->
    <div class="banner">
      <Banner :src="Src1"></Banner>
    </div>
    <div class="list">
      <!-- 精品推荐 -->
      <ListHeader :src="tuijian" title="精品推荐" :did="1"></ListHeader>
      <!-- 精品推荐列表 -->
      <GoogList :arr="jpList"></GoogList>
      <!-- 热门悦换 -->
      <ListHeader :src="hot" title="热门兑换" :did="2"></ListHeader>
      <!-- 热门悦换广告 -->
      <Banner :src="Src2"></Banner>
      <!-- 热门悦换列表 -->
      <GoogList :arr="hotList"></GoogList>
    </div>
    <!-- 积分悦换 -->
    <ListHeader :src="jifen" title="积分攻略" :ismore="true"></ListHeader>
    <GoogLue></GoogLue>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import Banner from "../components/home/Banner.vue";
import GoogList from "../components/home/GoogList.vue";
import GoogLue from "../components/home/GoogLue.vue";
import ListHeader from "@/components/home/ListHeader.vue";
import Src1 from "../assets/images/home/banner.png";
import Src2 from "../assets/images/home/ad.png";
import tuijian from "../assets/images/home/Recommend.png";
import hot from "../assets/images/home/hot.png";
import jifen from "../assets/images/home/integral.png";

import { getRecommenApi, getHotApi } from "../http/api";
export default {
  name: "Home",
  components: {
    ListHeader,
    GoogLue,
    GoogList,
    Banner,
    GoogLue,
  },
  data() {
    return {
      Src1,
      Src2,
      tuijian,
      hot,
      jifen,
      jpList: [],
      hotList: [],
    };
  },
  created() {
    this.getJPData();
    this.getHot();
  },
  methods: {
    async getJPData() {
      const { data } = await getRecommenApi();
      this.jpList = data.data.records.map((e) => {
        e.coverImg = `http://sc.wolfcode.cn` + e.coverImg;
        return e;
      });
    },

    async getHot() {
      const { data } = await getHotApi();
      this.hotList = data.data.records.map((e) => {
        e.coverImg = `http://sc.wolfcode.cn` + e.coverImg;
        return e;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  .banner {
    padding-bottom: 20px;
  }
  .list {
    background: #f5f5f5;
  }
}
</style>
